import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Table, Button, Card, Radio, Modal,Icon,Row,Col,Divider,message,Input
} from 'antd';
import docCookies from "../../common/DocCookies";

const Search = Input.Search;
@connect(state => ({
  lottery: state.lottery,
}))
export default class HisLottery extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    total:0,
    pageNoUser: 1,
    pageSizeUser: 50,
    rsId:docCookies.getItem("rsId"),
    drawUserId:docCookies.getItem("userId"),
    lotteryListData:[],
    totalPeople:0
  };

  ////初始化渲染后触发 整个过程只调用一次
  componentDidMount() {
    this.loadLotteryListInfo();
  }

  loadLotteryListInfo(searchText){
    const { dispatch } = this.props;
    const pageNo = this.state.pageNo ;
    const pageSize = this.state.pageSize ;
    // 需要传递的参数信息
    const params = {
      rsId:this.state.rsId,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    if(searchText) params.searchText=searchText;
    dispatch({
      type: 'lottery/listLotteryHistory',  //请求的action
      payload:params,
      callback:(data) =>{
        this.setState({
          lotteryListData: data.list,
          pageNo:data.pageNo,
          pageSize:data.pageSize,
          total:data.total,
          totalPeople:data.totalPeople,
        });
      }
    });

  }

  delLotteryInfo (id){
    const { dispatch } = this.props;
    const params = {
      lotteryId:id,
    };

    Modal.confirm({
      title: '提示',
      content: '您确定删除该抽奖活动吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'lottery/fetchDelLottery',  //请求的action
          payload: params,
          callback: (response) => {
            if(response.errorCode != 0){
              this.loadLotteryListInfo()
            }
            message.success(response.msg)
          }
        });
      }
    })
  }

  turnToAdAddPage(record,showDetail,id,status){
    const { dispatch} = this.props;
    const param = {
      path:'CreateNewLottery'
    }
    if(record) {
      param.record = record;
    }
    if(showDetail){
      param.showDetail = showDetail;
    }
    if(id){
      //查询中奖用户列表
      const pageNo = this.state.pageNoUser ;
      const pageSize = this.state.pageSizeUser ;
      // 需要传递的参数信息
      const params = {
        lotteryId:id,
        pageNo: pageNo,
        pageSize: pageSize,
      };

      dispatch({
        type: 'lottery/listLotteryResultById',  //请求的action
        payload:params,
        callback:(data) =>{
          if(data) {
            param.winUserRecord = data;
            param.winUserRecord.totalPeople = record.totalPeople;
          }
          dispatch({
            type: 'lottery/fetchLotteryAdd',
            payload:param
          });
        }
      });
    } else {
      //新增活动
      dispatch({
        type: 'lottery/fetchLotteryAdd',
        payload:param
      });
    }
  }

  handleTableChange = (page, pageSize) => {
    this.state.pageNo = page;
    this.setState({
      pageNo:page,
      pageSize:pageSize
    });
    this.loadLotteryListInfo();
  }

  handleSearch = (value) => {
    this.loadLotteryListInfo(value)
  }

  render() {
    const { pageSize ,total,pageNo} = this.state;
    const columns = [{
      title: '抽奖标题',
      dataIndex: 'lotteryName',
      key: 'lotteryName',
      width:'12%'
    }, {
      title: '抽取人数',
      dataIndex: 'peopleCount',
      key: 'peopleCount',
      width:'6%'
    }, {
      title: '抽取关键字',
      dataIndex: 'keyWord',
      key: 'keyWord',
      width:'12%',
      render: (text, record) => (
        <span>
          {record.keyWord != '' && typeof(record.keyWord)!="undefined" ? eval(record.keyWord).join(",") :null }
        </span>
      )
    }, {
      title: '时间设置',
      dataIndex: 'startTime',
      key: 'startTime',
      width:'14%',
      render: (text, record) => (
        <span>
          {record.startTime.substr(0,String(record.startTime).length-3)} 至 {record.endTime.substr(0,String(record.startTime).length-3)}
        </span>
      )
    },{
      title: '消息来源',
      dataIndex: 'messageFrom',
      key: 'messageFrom',
      width:'7%'
    },{
      title: '抽奖状态',
      dataIndex: 'lotteryStatus',
      key: 'lotteryStatus',
      width:'7%'
    },{
      title: '通知状态',
      dataIndex: 'informStatus',
      key: 'informStatus',
      width:'7%'
    }, {
      title: '操作',
      width:'10%',
      render: (text, record) => (
        <span>
          {record.lotteryStatus == "未抽"
            ? <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record,false)} >编辑</a>
            : <a disabled="true" >编辑</a>}
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record,true,record.id)} >详情</a>
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.delLotteryInfo(record.id)} >删除</a>
        </span>
      ),
    }];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    const extraCard = (
      <div>
        <Search
          placeholder="请输入抽奖活动标题"
          onSearch={(value) => this.handleSearch(value)}
          style={{ width: 200 }}
          enterButton
        />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Button type="primary" icon="plus" style={{ float:'right' }} onClick={() => this.turnToAdAddPage()}>添加</Button>
      </div>
    )

    return (
      <Card title="互动抽奖列表" extra={extraCard}>
        <Row gutter={16}>
          <Col className="gutter-row" span={24}>
            <Table dataSource={this.state.lotteryListData} columns={columns} style={{ width: '100%' }}
                   pagination={paginationProps}  />
          </Col>
        </Row>
      </Card>
    );
  }
}
